<template>
  <div class="page">
    <div class="hei20"></div>
    <div class="customsWrapper">
      <div class="customsContainer">
        <div class="customsMain">
            <mt-cell title="事件编号">
              <span style="color:#ff0000">[{{detail.serialNumber}}]</span>
            </mt-cell>
            <mt-cell title="事件来源">
              <span>{{detail.userRole}}</span>
            </mt-cell>
            <mt-cell title="事件描述">
              <span>{{detail.description}}</span>
            </mt-cell>
            <mt-cell title="上报人">
              <span>{{detail.gridName}}</span>
            </mt-cell>
            <mt-cell title="联系方式">
              <span>{{detail.reporterContact}}</span>
            </mt-cell>
            <mt-cell title="上报时间">
              <span>{{reportDate}}</span>
            </mt-cell>
            <mt-cell title="事件分类">
              <span>{{detail.eventCategory}}</span>
            </mt-cell>
            <mt-cell title="发生地址">
              <span>{{detail.happenAddress}}</span>
            </mt-cell>
            <mt-cell title="图片">
              <span v-if='detail.photo'>
                <img  class="upSrc" :src="baseUrl+'image'+detail.photo" />
              </span>
              <span v-else style="color:rgb(17, 193, 243)">暂无图片</span>
            </mt-cell>
            <mt-cell title="音频">
                <span v-if="detail.record">
                  <i @click="handlePlay('audio')"><img :src="require('@/assets/images/vioceBtn.png')" /> </i>
                  <audio class="audio" ref="audio">
                    <source :src="baseUrl+'file'+detail.record+'?token='+token" type="audio/mpeg">
                    您的浏览器不支持 audio 元素。
                  </audio>
                </span>
                <span style="color:rgb(17, 193, 243)" v-else>
                  暂无音频
                </span>
              </mt-cell>
            <p class="unitTitle center">办理记录</p>
            <div class="processingRecords" v-for='(item,index) in processingRecords' :key='index'>
              <mt-cell title="处理任务">
                <span style="color:#ff0000">{{item.taskName}}</span>
              </mt-cell>
              <mt-cell title="开始时间">
                <span>{{item.startTime | time}}</span>
              </mt-cell>
              <mt-cell title="结束时间">
                <span>{{item.endTime | time}}</span>
              </mt-cell>
              <mt-cell title="处理人">
                <span>{{item.assigneeName}}</span>
              </mt-cell>
              <!-- <mt-cell title="下一环节">
                <span>{{detail.happenAddress}}</span>
              </mt-cell> -->
              <mt-cell title="办理意见">
                <span style="color:green">
                  <p v-for='(li,index) in item.comments' :key='index'>{{index+1}}、{{li}}</p>
                </span>
              </mt-cell>
              <mt-cell title="图片">
                <span v-if="item.photo.length">
                  <i class="imgLi" v-for='(img,index) in item.photo' :key='index'><img class="upSrc" :src="baseUrl+'image'+img" /></i>
                </span>
                <span style="color:rgb(17, 193, 243)" v-else>
                  暂无图片
                </span>
              </mt-cell>
              <mt-cell title="音频">
                <span v-if="item.record">
                  <i @click="handlePlay('otherAudio')"><img :src="require('@/assets/images/vioceBtn.png')" /> </i>
                  <audio class="audio" ref="otherAudio">
                    <source :src="baseUrl+'file'+item.record+'?token='+token" type="audio/mpeg">
                    您的浏览器不支持 audio 元素。
                  </audio>
                </span>
                <span style="color:rgb(17, 193, 243)" v-else>
                  暂无音频
                </span>
              </mt-cell>
            </div>
            <p class="unitTitle center">办理意见</p>
            <div class="resolution">
              <mt-cell title="当前环节">
                <span>{{formData.taskName}}</span>
                <input type="hidden" value="formData.taskName" />
              </mt-cell>
              <mt-cell title="下一环节" class="radioBox">
                <span class="displaybox">
                  <mt-radio
                  class="radioItem"
                  v-model="formData.outcome"
                  :options="options">
                </mt-radio>
                </span>
              </mt-cell>
              <mt-cell title="办理意见">
                <span>
                  <mt-field
                      placeholder="办理意见"
                      type="textarea"
                      rows="3"
                      class="comment"
                      v-model="formData.comment"></mt-field>
                </span>
              </mt-cell>
              <mt-cell title="上传图片">
                <span class="imgList">
                  <template v-if="formData.photoArr" >
                    <div class="imgLi" v-for='(item,index) in formData.photoArr' :key="index">
                      <img :src='baseUrl+"image/"+item' />
                    </div>
                  </template>
                  <div class="upsrc">
                   <img :src="defaultImg" alt="" />
                   <input type="file" name="file_head" id="file_head" ref="file_head"  @change="handleUpImg()" />
                  </div>
                </span>
              </mt-cell>
              <mt-cell title="上传音频">
                <span>
                  <i class="sound" v-if='!formData.record'>
                    <img :src="require('@/assets/images/soundBtn.png')"/>
                    <input type="file"  ref="soundFile" class="soundFile" @change="handleSound()" />
                  </i>
                  <b v-else>
                    <i class="sound"  @click="handlePlay('sound')"><img :src="require('@/assets/images/vioceBtn.png')" /> </i>
                    <i class="sound"  @click="handleDelete('sound')"><img :src="require('@/assets/images/delete.png')" /> </i>
                    <audio class="audio" ref="sound">
                      <source :src="baseUrl+'file/'+ formData.record + '?token='+ token" type="audio/mpeg">
                      您的浏览器不支持 audio 元素。
                    </audio>
                  </b>
                  </span>
              </mt-cell>
              <div class="hei20"></div>
              <mt-button type="primary"
                       class="isDisplay"
                       size='small'
                       @click="save">提交</mt-button>
              <div class="hei20"></div>
            </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Lib from '@/assets/js/Lib'
import { Cell, Radio, Field, Button, MessageBox, Indicator } from 'mint-ui'
Vue.component(Button.name, Button)
Vue.component(Field.name, Field)
Vue.component(MessageBox.name, MessageBox)
Vue.component(Cell.name, Cell)
Vue.component(Radio.name, Radio)
import { findEventDetail, getHistoricEvent, findGridTree, finishTasks } from '@/assets/js/ApiUtil'
import { getLabelById, setTimes } from '@/assets/js/Utils'
import { uploadUntil } from '@/assets/js/ImageUtil'
import { uploadSoundUntil } from '@/assets/js/soundUntil'
import App from '@/assets/js/conf'
import  * as token from '@/assets/js/RequestUtil'
export default {
  name: 'customsDetail',
  data () {
    return {
      title: '事件详情',
      detail: {},
      processingRecords: [],
      formData: {},
      options: [],
      defaultImg: require('@/assets/images/upbtn.png'),
      photo: [],
      playFlag: false,
      baseUrl: App.baseUrl,
      token: token.token
    }
  },
  components: {
    Cell,
    Field,
    Button
  },
  mounted () {
    let id = this.getQueryVariable('id')
    let procesInsId = this.getQueryVariable('procesInsId')
    this.findEventData(id)
    this.getHistorictData(procesInsId)
  },
  methods: {
    getQueryVariable (variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length ; i++) {
          var pair = vars[i].split("=");
          if(pair[0] === variable){
            return pair[1]
          }
      }
    },
    save () {
      if (this.formData) {
        if (!this.validate(this.formData)) {
          return false
        }
        this.beforeSubmit()
        finishTasks(this.formData).then(resp => {
          if (resp.code && resp.code === '200') {
            MessageBox({title: '提示',
              message: '修改成功',
              showCancelButton: false}).then(action => {
              this.getTableData()
              this.close()
            })
          } else {
            let message = resp.code === '1751' ? resp.message : '处理失败，请检查填写是否符合规则或联系管理员' + resp.code
            MessageBox('提示', message)
          }
        })
      }
    },
    beforeSubmit () {
      this.formData.photo = this.toString(this.formData.photoArr)
    },
    validate (formData) {
      if (!formData.outcome) {
        MessageBox('提示', '选择下一环节')
        return false
      } else {
        return true
      }
    },
    findEventData (id) {
      findEventDetail(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.detail = data
          this.formData = data.act
          let options = data.act.options
          for (let i = 0; i < options.length; i++) {
            let tempObj = {}
            tempObj.label = options[i].name
            tempObj.value = options[i].value
            this.options.push(tempObj)
          }
          this.$set(this.formData, 'isWorkflow', data.act.procsInsId)
          this.getOptions(data.gridId)
        }
      })
    },
    getHistorictData (id) {
      getHistoricEvent(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.processingRecords = data.historicTaskVo
          for (let i = 0; i < this.processingRecords.length; i++) {
            this.processingRecords[i].photo = this.toArray(this.processingRecords[i].photo)
          }
        }
      })
    },
    getOptions (value) {
      findGridTree().then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            if (data[0].children) {
              let newData = JSON.parse(JSON.stringify(data[0].children))
              this.selectData = { data1: newData }
              this.$set(this.detail, 'gridName', getLabelById(value, this.selectData) + '--' + this.detail.reporterName)
              return false
            }
          }
        }
      })
    },
    toArray (string) {
      if (string) {
        return string.split(',')
      } else {
        return []
      }
    },
    toString (arr) {
      if (arr) {
        return arr.join(',') // abcde
      } else {
        return ''
      }
    },
    handleUpImg () {
      let filHead = this.$refs['file_head']
      let _this = this
      uploadUntil(filHead, function (data) {
        _this.photo.push(data[0])
        _this.$set(_this.formData, 'photoArr', _this.photo)
      })
    },
    handlePlay (key) {
      if (!this.playFlag) {
        this.playFlag = true
        this.$refs[key].play()
      } else {
        this.playFlag = false
        this.$refs[key].pause()
      }
    },
    handleSound () {
      let el = this.$refs['soundFile']
      let _this = this
      Indicator.open('加载中...')
      uploadSoundUntil(el, function (data) {
        _this.$set(_this.formData, 'record', data[0])
        Indicator.close()
      })
    },
    handleDelete (key) {
      this.formData.record = ''
    }
  },
  computed: {
    reportDate () {
      if (this.detail.reportDate) {
        return setTimes(this.detail.reportDate)
      } else {
        return ''
      }
    }
  },
  filters: {
    time (timer) {
      let setDb = function (num) {
      // 补零操作
        if (num < 10) {
          return '0' + num
        } else {
          return '' + num
        }
      }
      var time = new Date(timer)
      var year = time.getFullYear() // 年
      var mon = setDb(time.getMonth() + 1) // 0
      var day = setDb(time.getDate()) // 24
      var hour = setDb(time.getHours()) // 时
      var min = setDb(time.getMinutes()) // 分
      var sec = setDb(time.getSeconds()) // 秒
      return year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + sec
    }
  }
}
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  overflow: auto;
}
.customsWrapper {
  padding:0 10px
}
.customsTitle {
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  text-align: center
}
.mint-cell >>> .mint-cell-title {
  flex: 0 0 100px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 160%;
  }
.mint-cell span {
  padding:  10px 0;
  line-height: 160%;
}
.upSrc {
  width: 100px;
  height: 100px;
}
.unitTitle {
  border-bottom: 2px solid #26a2ff;
  margin: 10px 0;
  padding: 10px 0;
}
.processingRecords {
  margin-bottom: 10px;
}
.audio {
  width: 100px;
  height: 80px
}
.sound {
  position: relative;
  display: inline-block
}
.radioBox >>> .mint-cell-value {
  width: 100%
}
.soundFile {
  position: absolute;
  opacity: 0;
  width: 40px;
  height: 40px;
  left: 0;
  top: 0
}
.displaybox {
  display: block;
  width: 100%;
  border-left: 1px solid #dbdbdb;
  height: auto!important;
  line-height: auto!important;
}
.resolution .mint-cell >>> .mint-cell-value > span{
  border-left: 1px solid #dbdbdb;
  display: block;
  padding-left: 10px;
}
.radioItem >>> .mint-cell-value span {
   border-left: none!important
}
.radioItem >>> .mint-cell-title {
   width: 100%!important;
   flex: 0 0 100%
}
.radioItem >>> .mint-cell-wrapper {
   background: none;
}
.comment >>> .mint-cell-wrapper {
   background: none;
}
.upsrc {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: Center;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
}
.upsrc img {
  width: 100%;
  height: 100%;
}
#file_head {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  opacity: 0;
}
.imgLi {
  width: 100px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  margin-right: 10px;
}
.imgLi img {
  width: 100%;
}
.isDisplay {
  width: 100%;
}
</style>
